<!--
 * @Description: 网上书城
 * @Author: rendc
 * @Date: 2024-11-06 14:33:11
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-06 15:01:11
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网上书城</title>
  <style>
    .divPage .aPage{
      /* 上下 左右 */
      padding: 2px 6px; 
      border: 1px solid #9AAfe5;
      text-decoration: none;
      color: #9AAfe5;
    }
    .divPage .selected{
      background-color: #3C00FB;
      border-color: #3C00FB;
    }
  </style>
</head>
<body>
  <!-- 顶部 -->
  <div class="divTop">
    <div class="topLeft"></div>
    <div class="topRight"></div>
  </div>
  <!-- 内容区 -->
  <div class="divMiddle">
    <!-- 1. 目录 -->
    <!-- <div><a href=""></a></div> -->
    <!-- 2. 搜索框部分 -->
    <!-- <div>搜索框 <input type="text"> <input type="button" value="搜索"></div> -->
    <!-- 3. 图书展示部分 -->
    <div class="content">
      <div class="contentTop">首页&nbsp;&gt;&nbsp;旅游&nbsp;&gt;&nbsp;图书列表</div>
      <div class="contentBottom">
        <div class="title1">商品目录</div>
        <hr>
        <div class="title1" style="display: inline-block;">计算机类</div>
        <span>共100种商品</span>
        <hr>
        <div class="productList">PRODUCT LIST</div>
        <div class="bookList">
          <div class="book">
            <!-- 图片 -->
            书名：xxx
            售价：xxx
          </div>
          <div class="book">
            <!-- 图片 -->
            书名：xxx
            售价：xxx
          </div>
        </div>
        <!-- 分页按钮 -->
        <div class="divPage">
          <a class="aPage" href="">上一页</a>
          <a class="aPage" href="">1</a>
          <a class="aPage " href="">2</a>
          <a class="aPage selected" href="">3</a>
          <a class="aPage" href="">下一页</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <div class="divFooter">
    <!-- 加背景色 -->
    <!-- 左右布局 -->
    <div class="footerLeft">图片</div>
    <div class="footerRight">文字</div>
  </div>
</body>
</html>